<template>
    <div>
        <el-upload
                :limit="upload.limit"
                :action="upload.action"
                :accept="upload.accept"
                :list-type="upload.listType"
                :auto-upload="false"
                :file-list="upload.fileList"
                :on-remove="handleRemove"
                :on-change="onChangeFile"
                :on-preview="handlePictureCardPreview">
            <i v-if="upload.platform!=='phone'" class="el-icon-plus"/>
            <el-button v-else icon="el-icon-folder-opened" circle/>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {Component, Emit, Prop} from 'vue-property-decorator'
    import $http from "@/core/utils/http";
    import {errorMsg} from "@/core/utils/message";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import {copy} from "@/core/utils/Utils";

    @Component({
        name: 'UploadImage'
    })
    export default class UploadImage extends mixins(BaseVue, Kit) {
        //上传请求地址
        @Prop({
            default: {
                fileList: [],
                url: "",
                limit: "0",//最大数量
                listType: "picture-card",//展示类型
                maxSize: "0",//最大文件大小限制（单位M）
                config: {'Content-Type': 'multipart/form-data'},
                platform: "PC"
            }
        })
        private upload!: any;

        dialogImageUrl = '';
        dialogVisible = false;

        //初始化
        mounted() {
            this.upload = copy(this.upload);
            if (!this.upload.fileList) this.upload.fileList = [];
        }

        onChangeFile(file: any, fileList: any) {
            //检查文件大小
            if (this.upload.maxSize && this.upload.maxSize != 0) {
                if (file.size > (this.upload.maxSize * 1024 * 1024)) {
                    this.cancel(fileList, "上传文件超出限制大小" + this.upload.maxSize + "M");
                    return;
                }
            }

            //拼装参数
            let formData = new FormData();
            fileList.forEach((file: any) => {
                if (file.raw instanceof Blob) {
                    formData.append("files", file.raw, file.name);
                }
            });

            //上传文件
            $http.post(this.upload.url, formData, this.upload.config).then((res: any) => {
                if (res.success) {
                    this.upload.fileList.push(...res.data);
                } else {
                    this.upload.fileList = fileList.filter((item: any) => {
                        return !(item.raw instanceof Blob);
                    });
                }
                this.uploadBack();
            });
        }

        handlePictureCardPreview(file: any) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }

        handleRemove(file: any, fileList: any) {
            this.upload.fileList = fileList;
            this.uploadBack();
        }

        @Emit("uploadBack")
        uploadBack() {
            return {fileList: this.upload.fileList, "size": this.upload.fileList.length};
        }

        cancel(fileList: any, message: any) {
            errorMsg(message);
            this.upload.fileList = fileList.filter((item: any) => {
                return !(item.raw instanceof Blob);
            });
            this.uploadBack();
        }


    }
</script>

<style scoped>

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
